<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link type="text/css" rel="stylesheet" href="../css/csslxh/lxh.css">
</head>
<script language="javascript">
	
function moveContent(sele, seleTarget)
{
	  var indexArr = new Array();

	  for(i=0; i < sele.length; i++)
	  {
	  	  var opt = sele.options[i];
	  	  if(opt.selected)
	  	  {
	  	  	  indexArr.push(opt.index);
	  	  	  seleTarget.add(new Option(opt.text, opt.value));
	  	  }
	  }
		
		if(indexArr.length > 0)
		{
				for(i=indexArr.length-1; i >= 0; i--)
				{
					  sele.remove(indexArr[i]);
				}
	  }
	  		
}
	
</script>

<body>

<form name="myform" action="" method="post">


		<span style="border:1px solid black; position:absolute; overflow:hidden; left:120px; top:100px;">
        <select name="seleFrom" size="10" multiple class="d" style="width:200px;margin:-3px;background-color:#E3F1FD">        
           <option value="bj">北京</option>
        
           <option value="sh">上海</option>
        
           <option value="sz">深圳</option>
           
           <option value="wz">温州</option>
           
           <option value="qd">青岛</option>           
        </select>
        </span>

    
        <span style="border:0px solid black; position:absolute; overflow:hidden; left:360px; top:140px;">
    	<input type="button" value=" >> " class="btnStyle" onclick="moveContent(myform.seleFrom, myform.seleTo)"><br><br>
    	<input type="button" value=" << " class="btnStyle" onclick="moveContent(myform.seleTo, myform.seleFrom)">
        </span>

    

    	<span style="border:1px solid black; position:absolute; overflow:hidden; left:450px; top:100px;">  
        <select name="seleTo" size="10" multiple class="d" style="width:200px;margin:-3px;background-color:#E3F1FD">          
        </select>
        </span>
 

</form>

</body>

</html>